"use strict"
const ms = 180; // 组成圆的划分三角形个数
let canvas;
let mat4 = [];
var isADown = false;//用于键盘交互
var isDDown = false;//
var isWDown = false;//
var isSDown = false;//
// var istemp = false;//用于储存IsAll的关键信息
// 画圆
// 半径r 面数m 度数c
function getCircleVertex(r, m, c) {
    let arr = [];
    let addAng = c / m;
    let angle = 0;
    for (let i = 0; i < m; i++) {
        arr.push(Math.sin(Math.PI / 180 * angle) * r, Math.cos(Math.PI / 180 * angle) * r, 0, 1.0);
        arr.push(0.0, 0.0, 0.0, 1.0);
        angle = angle + addAng;
        arr.push(Math.sin(Math.PI / 180 * angle) * r, Math.cos(Math.PI / 180 * angle) * r, 0, 1.0);
    }
    return arr;
}
// 存储所有的圆形属性
// circlesAttr 半径 度数 圆心x坐标 圆心y坐标 颜色组 mat类型
// mat类型 0:
//      0.0, 1.0, 0.0, 0.0,
//     -1.0, 0.0, 0.0, 0.0,
//     0.0, 0.0, 1.0, 0.0,
//     Tx, Ty, Tz, 1.0
// mat类型 1:
//     1.0, 0.0, 0.0, 0.0,
//     0.0, 1.0, 0.0, 0.0,
//     0.0, 0.0, 1.0, 0.0,
//     Tx, Ty, Tz, 1.0
// mat类型 2:
//     0.0, -1.0, 0.0, 0.0,
//     1.0, 0.0, 0.0, 0.0,
//     0.0, 0.0, 1.0, 0.0,
//     Tx, Ty, Tz, 1.0
let circlesAttr = [
    [0.1, 90, -0.3, 0.6, 1, 0 ],        // 鸡嘴
    [0.15, 90, -0.2, 0.6, 4, 1],        // 鸡冠
    [0.1, 360, -0.2, 0.6, 0, 1],        // 鸡头
    [0.4, 270, -0.1, 0.15,0, 2],        // 鸡身
    [0.2, 90, -0.1, 0.15, 1, 2],        // 鸡翅
    [0.15, 90, -0.1, -0.4, 2, 0],       // 鸡腿
    [0.03, 360, -0.2, 0.6, 3, 1]        // 鸡眼
];

// 存放所有的矩形属性 即矩形的坐标
let rectAttr = [
    [-0.3, 0.7, -0.3, 0.6, -0.2, 0.7, -0.2, 0.6],
    [-0.2, 0.6, -0.2, 0.5, -0.1, 0.6, -0.1, 0.5]
]

// 存放颜色组
const colors = [
    [1.0, 0.843, 0.0, 1.0],     //金黄色
    [1.0, 0.647, 0.0, 1.0],     //橙色
    [0.824, 0.412, 0.118, 1.0], //巧克力色
    [0.0, 0.0, 0.0, 1.0],       //黑色
    [1.0, 0.0, 0.0, 1.0]        //红色
];

let selectedIndex = -1;         // 选取到的图形索引: -1代表未选取， 0-6代表圆形， 7-8代表矩形
let space = [];                 // 选区的点到顶点的距离(对于圆形为到圆心的距离)

// 控制是否全部选中
let isAll = false;
let allSelected = false

window.onload = function init() {
    canvas = document.getElementById("gl-canvas");

    let gl = WebGLUtils.setupWebGL(canvas);
    if (!gl) {
        alert("WebGL isn't available");
    }

    // 设置窗口大小
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.clearColor(1.0, 1.0, 1.0, 1.0);

    // 初始化着色器
    let program = initShaders(gl, "vertex-shader", "fragment-shader");
    gl.useProgram(program);

    // 获取vPosition变量的存储位置
    let vPosition = gl.getAttribLocation(program, "vPosition");
    if (vPosition < 0) {
        console.log('Failed to get the storage location of vPosition');
        return;
    }

    // 获取u_transMat变量的存储位置
    let u_transMat = gl.getUniformLocation(program, "u_transMat");
    if (u_transMat < 0) {
        console.log('Failed to get the storage location of u_transMat');
        return;
    }

    // 获取u_FragColor变量的存储位置
    let u_FragColor = gl.getUniformLocation(program, 'u_FragColor');
    if (!u_FragColor) {
        console.log('Failed to get the storage location of u_FragColor');
        return;
    }
    // 初始化绘图
    drawShapes(u_FragColor, u_transMat, vPosition, colors ,ms,gl)


    // 鼠标按下获取焦点
    canvas.onmousedown = function (ev) {
        getFocus(ev);
    }
    // 鼠标移动图形
    canvas.onmousemove = function (ev) {
        move(ev, gl,u_FragColor,u_transMat, vPosition);
    }
    // 鼠标抬起失去焦点
    canvas.onmouseup = function () {
        loseFocus();
    }

    document.onkeydown = function (event) {
        onDocumentKeyDown(event,gl,u_FragColor, u_transMat, vPosition)
    }

    document.onkeyup = function (event) {
        onDocumentKeyUp(event)
    }

};

//键盘监听事件响应函数
function onDocumentKeyDown(event,gl,  u_FragColor, u_transMat, vPosition) {
    // let moveAttr = []
    switch (event.keyCode) {
        case 65:
            // isAll = true;
            isADown = true;

            pressmove(gl, u_FragColor, u_transMat, vPosition);
            break;
        case 68:
            // isAll = true;
            isDDown = true;
            pressmove(gl, u_FragColor, u_transMat, vPosition);
            break;
        case 87:
            // isAll = true;
            isWDown = true;
            pressmove(gl, u_FragColor, u_transMat, vPosition);
            break;
        case 83:
            // isAll = true;
            isSDown = true;
            pressmove(gl, u_FragColor, u_transMat, vPosition);
            break;
    }

}

function onDocumentKeyUp(event) {

    switch (event.keyCode) {
        case 65:
            // isAll = istemp;
            isADown = false;
            break;
        case 68:
            // isAll = istemp;
            isDDown = false;
            break;
        case 87:
            // isAll = istemp;
            isWDown = false;
            break;
        case 83:
            // isAll = istemp;
            isSDown = false;
            break;

    }
}

function pressmove( gl, u_FragColor, u_transMat, vPosition)
{
    // toast("大傻");
    if (isADown === true) {
        toast("向前走");

        for(let i = 0; i< circlesAttr.length;i++){
            circlesAttr[i][2] = circlesAttr[i][2] - 20/canvas.width
        }
        for (let i = 0; i< rectAttr.length; i++){
            for (let j = 0; j < 4;j++ ){
                rectAttr[i][2 * j] = rectAttr[i][2 * j] - 20/canvas.width;
            }
        }
        UpdateArrayBuffer(gl, u_FragColor, u_transMat, vPosition)
    }
    if (isDDown === true) {
        toast("向后走");
        for(let i = 0; i< circlesAttr.length;i++){
            circlesAttr[i][2] = circlesAttr[i][2] + 20/canvas.width
        }
        for (let i = 0; i< rectAttr.length; i++){
            for (let j = 0; j < 4;j++ ){
                rectAttr[i][2 * j] = rectAttr[i][2 * j] + 20/canvas.width;
            }
        }
        UpdateArrayBuffer(gl, u_FragColor, u_transMat, vPosition)
    }
    if (isWDown === true) {
        toast("向上走");
        for(let i = 0; i< circlesAttr.length;i++){
            circlesAttr[i][3] = circlesAttr[i][3] + 20/canvas.height
        }
        for (let i = 0; i< rectAttr.length; i++){
            for (let j = 0; j < 4;j++ ){
                rectAttr[i][2 * j+1] = rectAttr[i][2 * j+1] + 20/canvas.height;
            }
        }
        UpdateArrayBuffer(gl, u_FragColor, u_transMat, vPosition)
    }
    if(isSDown === true){
        toast("向下走");
        for(let i = 0; i< circlesAttr.length;i++){
            circlesAttr[i][3] = circlesAttr[i][3] - 20/canvas.height
        }
        for (let i = 0; i< rectAttr.length; i++){
            for (let j = 0; j < 4;j++ ){
                rectAttr[i][2 * j+1] = rectAttr[i][2 * j+1] - 20/canvas.height;
            }
        }
        UpdateArrayBuffer(gl, u_FragColor, u_transMat, vPosition)
    }

}



// 初始化画图
function drawShapes(u_FragColor, u_transMat,vPosition,colors,ms,gl){

    // 画鸡嘴（90°圆）
    var vertices = getCircleVertex(0.1, ms, 90);

    var Tx = -0.3;
    var Ty = 0.6;
    var Tz = 0.0;
    mat4 = new Float32Array([
        0.0, 1.0, 0.0, 0.0,
        -1.0, 0.0, 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        Tx, Ty, Tz, 1.0
    ]);
    // console.log(vertices)
    // 创建缓存
    var buffer = gl.createBuffer(); // 为顶点创建的缓存
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer); // 绑定缓冲区
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vPosition);

    gl.uniform4f(u_FragColor, colors[1][0], colors[1][1], colors[1][2], colors[1][3]);
    gl.uniformMatrix4fv(u_transMat, false, mat4);

    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, ms * 3);


//画鸡冠
    vertices = getCircleVertex(0.15, ms, 90);
    var Tx = -0.2;
    var Ty = 0.6;
    var Tz = 0.0;
    mat4 = new Float32Array([
        1.0, 0.0, 0.0, 0.0,
        0.0, 1.0, 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        Tx, Ty, Tz, 1.0
    ]);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0);
    gl.uniform4f(u_FragColor, colors[4][0], colors[4][1], colors[4][2], colors[4][3]);
    gl.uniformMatrix4fv(u_transMat, false, mat4);
    gl.drawArrays(gl.TRIANGLES, 0, ms * 3);

// 画鸡头（圆）
    var vertices = getCircleVertex(0.1, ms, 360);
    var Tx = -0.2;
    var Ty = 0.6;
    var Tz = 0.0;
    var mat4 = new Float32Array([
        1.0, 0.0, 0.0, 0.0,
        0.0, 1.0, 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        Tx, Ty, Tz, 1.0
    ]);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); // 向缓冲区写入顶点数据
    gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0);
    gl.uniform4f(u_FragColor, colors[0][0], colors[0][1], colors[0][2], colors[0][3]);
    gl.uniformMatrix4fv(u_transMat, false, mat4);
    gl.drawArrays(gl.TRIANGLES, 0, ms * 3);
//正方形1
    var mat4 = new Float32Array([
        1.0, 0.0, 0.0, 0.0,
        0.0, 1.0, 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        0.0, 0.0, 0.0, 1.0
    ]);
    var n = 4;
    var vertices = new Float32Array([
        -0.3, 0.7, -0.3, 0.6, -0.2, 0.7, -0.2, 0.6
    ]);
    // console.log(vertices)
    var vertexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
    gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
    gl.uniform4f(u_FragColor, colors[0][0], colors[0][1], colors[0][2], colors[0][3]);
    gl.uniformMatrix4fv(u_transMat, false, mat4);
// Enable the assignment to a_Position variable
    gl.enableVertexAttribArray(vPosition);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);
//正方形2
    var vertices = new Float32Array([
        -0.2, 0.6, -0.2, 0.5, -0.1, 0.6, -0.1, 0.5
    ]);
    var vertexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
    gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
    gl.uniform4f(u_FragColor, colors[0][0], colors[0][1], colors[0][2], colors[0][3]);
    gl.uniformMatrix4fv(u_transMat, false, mat4);
// Enable the assignment to a_Position variable
    gl.enableVertexAttribArray(vPosition);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);
// 画鸡身体（0.4的四分之三圆）
    vertices = getCircleVertex(0.4, ms, 270);
    mat4 = new Float32Array([
        0.0, -1.0, 0.0, 0.0,
        1.0, 0.0, 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        -0.1, 0.15, 0.0, 1.0
    ]);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0);
    gl.uniform4f(u_FragColor, colors[0][0], colors[0][1], colors[0][2], colors[0][3]);
    gl.uniformMatrix4fv(u_transMat, false, mat4);
    gl.drawArrays(gl.TRIANGLES, 0, ms * 3);

// 画鸡翅膀
//0.2的四分之一圆
    vertices = getCircleVertex(0.2, ms, 90);
    mat4 = new Float32Array([
        0.0, -1.0, 0.0, 0.0,
        1.0, 0.0, 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        -0.1, 0.15, 0.0, 1.0
    ]);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0);
    gl.uniform4f(u_FragColor, colors[1][0], colors[1][1], colors[1][2], colors[1][3]);
    gl.uniformMatrix4fv(u_transMat, false, mat4);
    gl.drawArrays(gl.TRIANGLES, 0, ms * 3);

// 画鸡尾巴（30°扇形）
    vertices = getCircleVertex(0.3, ms, 30);
    mat4 = new Float32Array([
        0, -1, 0.0, 0.0,
        1.0, 0, 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        0.1, 0.15, 0.0, 1.0
    ]);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0);
    gl.uniformMatrix4fv(u_transMat, false, mat4);
    // gl.drawArrays(gl.TRIANGLES, 0, ms * 3);

// 画鸡腿
    vertices = getCircleVertex(0.15, ms, 90);

    mat4 = new Float32Array([
        0.0, 1.0, 0.0, 0.0,
        -1.0, 0.0, 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        -0.1, -0.4, 0.0, 1.0
    ]);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0);
    gl.uniform4f(u_FragColor, colors[2][0], colors[2][1], colors[2][2], colors[2][3]);
    gl.uniformMatrix4fv(u_transMat, false, mat4);
    gl.drawArrays(gl.TRIANGLES, 0, ms * 3);

// 画鸡眼睛（圆）
    var vertices = getCircleVertex(0.03, ms, 360);

    var Tx = -0.2;
    var Ty = 0.6;
    var Tz = 0.0;
    var mat4 = new Float32Array([
        1.0, 0.0, 0.0, 0.0,
        0.0, 1.0, 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        Tx, Ty, Tz, 1.0
    ]);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); // 向缓冲区写入顶点数据
    gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0);
    gl.uniform4f(u_FragColor, colors[3][0], colors[3][1], colors[3][2], colors[3][3]);
    gl.uniformMatrix4fv(u_transMat, false, mat4);
    gl.drawArrays(gl.TRIANGLES, 0, ms * 3);
}


// 鼠标抬起时失去焦点
function loseFocus() {
    selectedIndex = -1;
    allSelected = false;
}

// 鼠标按下时获取焦点
function getFocus(ev) {
    let xy = getCursorPos(ev)
    let x = xy[0];
    let y = xy[1];
    // 先判断是否选中圆形
    for (let i = circlesAttr.length - 1; i>=0; i--){
        if (isIn(x,y,circlesAttr[i][0],circlesAttr[i][1],circlesAttr[i][2],circlesAttr[i][3], circlesAttr[i][5])){
            selectedIndex = i;
            space = calculateCircleSpace(x, y, circlesAttr[i][2],circlesAttr[i][3])
            if (isAll) {
                allSelected = true;
                calculateTotalSpace(x,y)
            }
            return
        }
    }
    // 再判断是否选中矩形
    for (let i = 0; i < rectAttr.length; i++){
        if (isIn(rectAttr[i][0], rectAttr[i][6], rectAttr[i][7], rectAttr[i][1], x, y)){
            selectedIndex = i + circlesAttr.length;
            space = calculateSpace(x, y, i)
            if (isAll){
                allSelected = true;
                calculateTotalSpace(x,y)
            }
        }
    }
}


// 判断是否选中物体
// 当参数个数为7时 x,y: 鼠标点击的点  r: 半径  c: 度数, centerX: 原点x坐标, centerY: 原点y坐标, matType: 矩阵类型
// 当参数个数为6时 x,y,r,c: 矩形的对角点坐标
function isIn(x, y, r, c, centerX, centerY, matType) {
    if (arguments.length === 7){
        if (Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2) <= Math.pow(r, 2)) {
            if (c === 90) {
                switch (matType) {
                    case 0:
                        return (x - centerX < 0 && y - centerY > 0)
                    case 1:
                        return (x - centerX > 0 && y - centerY > 0)
                    case 2:
                        return (x - centerX > 0 && y - centerY < 0)
                    default:
                        return false
                }
            } else if (c === 180) {
                return x - centerX < 0
            } else if (c === 270) {
                return !(x - centerX > 0 && y - centerY > 0)
            } else {
                return true
            }
        }
        return false
    }
    else if (arguments.length === 6){
        return (centerX > x && centerX < y && centerY > r && centerY < c)
    }
}


// 更新数据，绘图
function UpdateArrayBuffer(gl, u_FragColor, u_transMat, vPosition) {
    gl.clear(gl.COLOR_BUFFER_BIT);

    // 先绘制矩形，防止矩形覆盖圆形
    for (let i = 0; i<rectAttr.length;i++){
        let vertices = new Float32Array([
            rectAttr[i][0], rectAttr[i][1], rectAttr[i][2], rectAttr[i][3],
            rectAttr[i][4], rectAttr[i][5], rectAttr[i][6], rectAttr[i][7]
        ]);
        mat4 = getMat(1)

        let vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
        gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
        gl.uniform4f(u_FragColor, colors[0][0], colors[0][1], colors[0][2], colors[0][3]);
        gl.uniformMatrix4fv(u_transMat, false, mat4);
        gl.enableVertexAttribArray(vPosition);
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    }

    for(let i = 0; i< circlesAttr.length; i++){

        let vertices = getCircleVertex(circlesAttr[i][0], ms, circlesAttr[i][1]);

        mat4 = getMat(circlesAttr[i][5])
        mat4[12] = circlesAttr[i][2]
        mat4[13] = circlesAttr[i][3]
        // 创建缓存
        let buffer = gl.createBuffer(); // 为顶点创建的缓存
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer); // 绑定缓冲区
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
        gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(vPosition);

        gl.uniform4f(u_FragColor, colors[circlesAttr[i][4]][0], colors[circlesAttr[i][4]][1],
            colors[circlesAttr[i][4]][2], colors[circlesAttr[i][4]][3]);
        gl.uniformMatrix4fv(u_transMat, false, mat4);
        gl.drawArrays(gl.TRIANGLES, 0, ms * 3);
    }
}
// 鼠标移动时根据IsFocus来判断是否需要移动
function move(ev, gl, u_FragColor, u_transMat, vPosition) {
    if (!allSelected){
        if (selectedIndex !== -1) {
            // 绘制圆形
            if(selectedIndex < circlesAttr.length){
                let xy = getCursorPos(ev);
                circlesAttr[selectedIndex][2] = xy[0] - space[0];
                circlesAttr[selectedIndex][3] = xy[1] - space[1];
            }
            // 绘制矩形
            else if (selectedIndex >= circlesAttr.length) {
                let xy = getCursorPos(ev);
                // console.log(selectedIndex)
                // rectAttr[selectedIndex - circlesAttr.length][8] = xy[0];
                // rectAttr[selectedIndex - circlesAttr.length][9] = xy[1];
                for (let i = 0; i < 4; i++) {
                    rectAttr[selectedIndex - circlesAttr.length][2 * i] = xy[0] + space[i][0];
                    rectAttr[selectedIndex - circlesAttr.length][2 * i + 1] = xy[1] + space[i][1];
                }
            }
            UpdateArrayBuffer(gl, u_FragColor, u_transMat, vPosition)
        }
    }
    else {
        let xy = getCursorPos(ev);
        for(let i = 0; i< circlesAttr.length;i++){
            circlesAttr[i][2] = xy[0] + space[i][0]
            circlesAttr[i][3] = xy[1] + space[i][1]
        }
        for (let i = 0; i< rectAttr.length; i++){
            for (let j = 0; j < 4;j++ ){
                rectAttr[i][2 * j] = xy[0] + space[i+circlesAttr.length][j][0] ;
                rectAttr[i][2 * j + 1] = xy[1] + space[i+circlesAttr.length][j][1];
            }
        }
        UpdateArrayBuffer(gl, u_FragColor, u_transMat, vPosition)
    }
}


function All() {
    // console.log("hello")
    isAll = !isAll;
    if (isAll){
        toast("已全选")
    }else {
        toast("取消全选")
    }
}
function toast(text, time) {
    let toast = document.getElementById('toast');
    let toast_box = document.getElementsByClassName('toast_box')[0];
    toast.innerHTML = text;
    toast_box.style.animation = 'show 1.5s'
    toast_box.style.display = 'inline-block';
    setTimeout(function(){
        toast_box.style.animation = 'hide 1.5s'
        setTimeout(function(){
            toast_box.style.display = 'none';
        }, 1400)
    }, time)
}

// 计算鼠标点击的点到圆心的间距
function calculateCircleSpace(x, y, centerX, centerY) {
    return [x - centerX, y - centerY]
}

// 计算鼠标点击的点到四个顶点的间距
function calculateSpace(x, y, index) {
    let Temp = []
    for (let i = 0; i < 4; i++) {
        // console.log(rectAttr[index][2*i], rectAttr[index][2*i+1])
        Temp[i] = [rectAttr[index][2*i] - x, rectAttr[index][2*i + 1] - y]
    }
    return Temp
}


// 获取光标位置
function getCursorPos(ev) {
    let x = ev.clientX;
    let y = ev.clientY;
    // 返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合，就是该元素的 CSS 边框大小。
    // 返回的结果是包含完整元素的最小矩形，并且拥有left, top, right, bottom, x, y, width,
    // 和 height这几个以像素为单位的只读属性用于描述整个边框。除了width 和 height 以外的属性是相对于视图窗口的左上角来计算的
    let rect = ev.target.getBoundingClientRect();
    x = x - rect.left
    y = y - rect.top
    x = -1.0 + x / (canvas.width / 2);
    y = 1.0 - y / (canvas.height / 2);
    return [x, y]
}

// 根据变换矩阵类型获取对应的矩阵
function getMat(matType) {
    if (matType === 0){
        return new Float32Array([
            0.0, 1.0, 0.0, 0.0,
            -1.0, 0.0, 0.0, 0.0,
            0.0, 0.0, 1.0, 0.0,
            0.0, 0.0, 0.0, 1.0
        ]);
    }
    else if (matType === 1){
        return new Float32Array([
            1.0, 0.0, 0.0, 0.0,
            0.0, 1.0, 0.0, 0.0,
            0.0, 0.0, 1.0, 0.0,
            0.0, 0.0, 0.0, 1.0
        ]);
    }
    else{
        return new Float32Array([
            0.0, -1.0, 0.0, 0.0,
            1.0, 0.0, 0.0, 0.0,
            0.0, 0.0, 1.0, 0.0,
            0.0, 0.0, 0.0, 1.0
        ]);
    }
}

// 在全部选中的时候计算间距
function calculateTotalSpace(x,y) {
    for(let i = 0; i< circlesAttr.length;i++){
        space[i] = calculateCircleSpace(circlesAttr[i][2], circlesAttr[i][3], x, y)
    }
    for(let i = 0; i< rectAttr.length;i++){
        space[i+circlesAttr.length] = calculateSpace(x, y, i )
    }
}
/*
// 下拉框的具体功能
function getSelectValue(val){
    alert(val);
    if (val == "刷新"){
        location.reload();
    }
    if (val == "清除"){
    document.body.innerHTML = "";
    }
}
*/
